<template>
<div class="box">
  <div id="main" style="width: 50%; height: 80%; margin-right: 20px;"></div>
  <div id="bb" style="width: 50%; height: 80%;"></div>
</div>
</template>

<script setup lang="ts">
import * as echarts from 'echarts';
import { onMounted } from 'vue';
import { admin_data_simpleData,admin_data_kData } from "../../../utils/api";
type EChartsOption = echarts.EChartsOption;
var option: EChartsOption;
let arr:any = []
let arr1:any = []
let arr2:any=[]
let arr3:any=[]
  onMounted(()=>{
    // 发请求
    admin_data_simpleData().then((res: any) => {
  if (res.data.code === "200") {
    console.log("res.data.data",res.data.data);
    res.data.data.forEach((item:any) => {
      arr.push(item.x)
      arr1.push(item.val)
    });
  }
}).then(()=>{
  showChart()
})
// 发请求
admin_data_kData().then((res: any) => {
  if (res.data.code === "200") {
    console.log("res.data.data",res.data.data);
    arr2.push(...res.data.data.x)
    res.data.data.val.forEach((item:any)=>{
      arr3.push(...item)
    })
  }
}).then(()=>{
  showChart1()
})

})

const showChart = () =>{
  var chartDom = document.getElementById('main')!;
  var myChart = echarts.init(chartDom);
  option = {
    title:{
      text:"商品数据表(周表)"
    },
    xAxis: {
      type: 'category',
      data:arr
    },
    tooltip: {trigger: 'axis'},
    legend: {
      data: ['销量']
    },
    toolbox: {
    feature: {
      saveAsImage: {}
    }
  },
    yAxis: {
      type: 'value'
    },
    series: [
      {
        name:"销量",
        data:arr1,
        type: 'bar',
        barWidth:"20"
      }
    ],
    backgroundColor: "pink",
  };
  myChart.setOption(option);
}
const showChart1 = () =>{
  var cc = document.getElementById('bb')!;
  var dd = echarts.init(cc);
  option = {
    title:{
      text:"商品数据统计图"
    },
    toolbox: {
    feature: {
      saveAsImage: {}
    }
  },
  // grid: {
  //   left: '3%',
  //   right: '4%',
  //   bottom: '3%',
  //   containLabel: true
  // },
    xAxis: {
      type: 'category',
      data:arr2,
    },
    tooltip: {trigger: 'axis'
  },
    legend: {
      data: ['袜子','内裤','秋裤','手套']
    },
    yAxis: {
      type: 'value'
    },
    series: [
      {
        name: '袜子',
        data:arr3.splice(0,4),
        type: 'line',
      },
      {
        name: '内裤',
        data:arr3.splice(0,4),
        type: 'line',
      },
      {
        name: '秋裤',
        data:arr3.splice(0,4),
        type: 'line',
      },
      {
        name: '手套',
        data:arr3.splice(0,4),
        type: 'line',
      }
    ],
    backgroundColor: "hotpink",
  };
  dd.setOption(option);
}


</script>

<style scoped>
.box{
  width: 100%;
  height: 100%;
  display: flex;
}
</style>